@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$toast: () !default;
$toast: map.merge(
  (
    z-index: get-css-var('z-index-masker'),
    min-width: 100px,
    max-width: 90%,
    min-height: 100px,
    v-padding: 16px,
    h-padding: 16px,
    color: get-css-var('color-white'),
    bg-color: get-css-var('color-black'),
    radius: get-css-var('radius-large'),
    opacity: 70%
  ),
  $toast
);

.#{$namespace}-toast {
  &-vars {
    @include define-preset-values('toast', $toast);
  }

  @include basis;

  position: fixed;
  inset: 0;
  z-index: get-css-var('z-index-masker');
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  &--text-only {
    @include define-preset-values(
      'toast',
      (
        min-height: 0,
        v-padding: 8px
      )
    );
  }

  & > * {
    pointer-events: auto;
  }

  &__mask {
    position: absolute;
    inset: 0;
    background-color: transparent;
  }

  &__wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: get-css-var('toast-min-width');
    max-width: get-css-var('toast-max-width');
    min-height: get-css-var('toast-min-height');
    padding: get-css-var('toast-v-padding') get-css-var('toast-h-padding');
    color: get-css-var('toast-color');
    user-select: none;
    background-color: transparent;
    border-radius: get-css-var('toast-radius');
    transition: get-css-var('transition-color'), get-css-var('transition-background');

    &--top {
      position: absolute;
      top: 30px;
    }

    &--bottom {
      position: absolute;
      bottom: 30px;
    }

    &--closable {
      cursor: pointer;
    }

    &::before {
      @include inner-fixed;

      z-index: -1;
      pointer-events: none;
      content: '';
      background-color: get-css-var('toast-bg-color');
      border-radius: get-css-var('toast-radius');
      opacity: get-css-var('toast-opacity');
    }
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
  }

  &__content {
    width: fit-content;
    word-break: break-all;
    white-space: pre-wrap;
  }
}
